<template>
  <div class="scrollbar-wrapper" ref="scrollbar-wrapper">
    <el-menu
      class="el-menu-vertical"
      :default-active="activePath"
      :collapse="collapase"
      background-color="#304156"
      text-color="#bfcbd9"
      :unique-opened="true"
      active-text-color="#409EFF"
      :collapse-transition="false"
      mode="vertical"
      @select="fnSelect"
    >
      <div
        class="logo"
        v-if="!collapase"
        @click="
          () => {
            this.$router.push('/cameraPlay');
          }
        "
      >
        <img :src="logoImg" alt />
      </div>
      <div class="menu-ul">
        <happy-scroll color="#4677d4" size="5" hide-horizontal resize>
          <MenuItem
            v-for="route in menus"
            :key="route.index"
            :item="route"
            :base-path="route.index"
          />
        </happy-scroll>
      </div>
    </el-menu>
  </div>
</template>
<script>
import hanbang from "./../../assets/img/logo-hb.png";
import sugon from "./../../assets/img/logo-sugon.png";
import shutian from "./../../assets/img/logo-shutian.png";
import MenuItem from "./MenuItem";
import permissions from "@/config/permissions.config.js";

import { haveSame } from "@/utils/Tool.js";
export default {
  props: {
    collapase: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      menus: [
        {
          expand: true,
          index: "/cameraPlay",
          iconClass: "el-icon-video-camera",
          meta: {
            title: "我的视频",
          },
          show: true, // 是否显示，必须有
          children: [
            {
              expand: false,
              index: "/cameraPlay",
              meta: {
                title: "视频播放",
              },
              show: true,
            },
            {
              expand: false,
              index: "/mapMarkCamera",
              meta: {
                title: "地图展示",
              },
              show: true,
              changeMap: ["hanbang", "shutian", "sugon"], //对应config.js中的toCompany
            },
            {
              expand: false,
              index: "/ArcGIS",
              meta: {
                title: "地图展示",
              },
              show: true,
              changeMap: ["shuguang"],  //对应config.js中的toCompany
            },
            {
              expand: false,
              index: "/playTask",
              meta: {
                title: "播放任务",
              },
              show: true,
            },
            {
              expand: false,
              index: "/playlogs",
              meta: {
                title: "播放日志",
              },
              show: true,
            },
          ],
        },
        {
          expand: true,
          index: "/videoRecord",
          iconClass: "el-icon-video-camera-solid",
          meta: {
            title: "视频录像",
          },
          show: true, // 是否显示，必须有
          children: [
            {
              expand: false,
              index: "/videoRecord",
              meta: {
                title: "录像回放",
              },
              show: true,
            },
            {
              expand: false, // 是否显示下一级
              index: "/videoProgram",
              meta: {
                title: "录像计划",
              },
              show: true,
              hideChildren: true,
              children: [
                {
                  expand: false,
                  show: true,
                  index: "/videoProgram/timeSeries",
                  meta: {
                    title: "时间序列",
                  },
                },
              ],
            },
          ],
        },
        {
          expand: true,
          index: "/camera",
          iconClass: "el-icon-s-platform",
          meta: {
            title: "设备",
          },
          show: true,
          children: [
            {
              expand: false, // 是否显示下一级
              index: "/camera",
              meta: {
                title: "摄像机",
              },
              show: true,
              hideChildren: true,
              children: [
                {
                  expand: false,
                  show: true,
                  index: "/camera/applyBills",
                  meta: {
                    title: "票据",
                  },
                },
              ],
            },

            {
              expand: false,
              index: "/ydtBox",
              meta: {
                title: "一点通盒子",
              },
              show: true,
            },
            {
              expand: false,
              index: "/gateway",
              meta: {
                title: "一点通网关",
              },
              show: true,
            },
            {
              expand: false,
              index: "/mwGateway",
              meta: {
                title: "高速公路网关",
              },
              show: true,
            },
            {
              expand: false,
              index: "/statusMsg",
              meta: {
                title: "状态消息",
              },
              show: true,
            },
          ],
        },
        {
          expand: true,
          index: "/hostList",
          iconClass: "el-icon-s-operation",
          meta: {
            title: "流媒体主机",
          },
          show: true,
          children: [
            {
              expand: false,
              index: "/hostList",
              meta: {
                title: "主机列表",
              },
              show: true,
            },
            {
              expand: false,
              index: "/deviceList",
              meta: {
                title: "分配设备列表",
              },
              show: true,
            },
            {
              expand: false,
              index: "/deviceListUndistributed",
              meta: {
                title: "未分配设备列表",
              },
              show: true,
            },
            {
              expand: false,
              index: "/videoRequestLog",
              meta: {
                title: "视频请求日志",
              },
              show: true,
            },
          ],
        },
        {
          expand: true,
          index: "/allAdmin",
          iconClass: "el-icon-s-help",
          meta: {
            title: "开放平台",
          },
          show: true,
          children: [
            {
              expand: false,
              index: "/allAdmin",
              meta: {
                title: "开发者",
              },
              show: true,
            },
            {
              expand: false,
              index: "/allApplication",
              meta: {
                title: "应用",
              },
              show: true,
            },
            {
              expand: false,
              index: "/APPOperationRecord",
              meta: {
                title: "操作记录",
              },
              show: true,
            },
          ],
        },
        {
          expand: true,
          index: "/allApi",
          iconClass: "el-icon-s-cooperation",
          meta: {
            title: "API权限",
          },
          show: true,
          children: [
            {
              expand: false,
              index: "/allApi",
              meta: {
                title: "API列表",
              },
              show: true,
            },
            // {
            //   expand: false,
            //   index: "/apiAccess",
            //   meta: {
            //     title: "API访问统计"
            //   },
            //   show: true
            // },
            // {
            //   expand: false,
            //   index: "/ipBlacklist",
            //   meta: {
            //     title: "频繁访问IP黑名单"
            //   },
            //   show: true
            // }
          ],
        },
        {
          expand: true,
          index: "/roleManage",
          iconClass: "el-icon-s-tools",
          meta: {
            title: "系统",
          },
          show: true,
          children: [
            {
              expand: false,
              index: "/roleManage",
              meta: {
                title: "角色",
              },
              show: true,
            },
            {
              expand: false,
              index: "/organization",
              meta: {
                title: "分组",
              },
              show: true,
            },

            {
              expand: false,
              index: "/adminList",
              meta: {
                title: "管理员",
              },
              show: true,
            },
            /* {
              expand: false,
              index: "/OAuth2",
              meta: {
                title: "OAuth2用户"
              },
              show: true
            }, */
            {
              expand: false,
              index: "/systemParamSetting",
              meta: {
                title: "系统设置",
              },
              show: true,
            },
            {
              expand: false,
              index: "/adminSetting",
              meta: {
                title: "我的设置",
              },
              show: true,
            },
            {
              expand: false,
              index: "/errorSystemCode",
              meta: {
                title: "误码表",
              },
              show: true,
            },
            {
              expand: false,
              index: "/operationRecord",
              meta: {
                title: "操作记录",
              },
              show: true,
            },
          ],
        },
      ], // menu菜单
      menuCheck: {}, // 单签选中的菜单数据
      activePath: "", // 高亮菜单
      dataMenus: [],
    };
  },
  computed: {
    // 在beforeEach里面存取到localStorage，在这里取出，得到当前登录用户权限值
    auth() {
      return localStorage.getItem("username");
    },

    routes() {
      return JSON.parse(localStorage.getItem("permissions"));
    },

    /*
     * @desc 初始化tag标签
     * */
    visitedViews() {
      if (localStorage.getItem("menu")) {
        var arr = JSON.parse(localStorage.getItem("menu"));
      } else {
        var arr = this.$store.state.tagViews.visitedViews;
      }
      return this.$store.state.tagViews.visitedViews;
    },

    /*
     * @desc 菜单是否折叠
     * */
    isCollapse() {
      return this.$store.state.isCollapse;
    },

    /* 
        @desc logo图片
    */
    logoImg() {
      let toCompany = window.toCompany || "";
      if (toCompany == "hanbang" || toCompany == "") {
        return hanbang;
      }
      if (toCompany == "shutian") {
        return shutian;
      }
      if (toCompany == "sugon") {
        return sugon;
      }
    },
  },

  methods: {
    /*
    一级菜单(父级)显示隐藏(通过控制show来显示隐藏)
    @params
    {Array} dataMenus 菜单数组
    */
    setParentMenu(dataMenus) {
      let menus = this.routes;
      if (
        Array.isArray(dataMenus) &&
        dataMenus.length > 0 &&
        Array.isArray(menus) &&
        menus.length > 0
      ) {
        for (let i = 0; i < dataMenus.length; i++) {
          let item = dataMenus[i];
          if (Array.isArray(item.children) && item.children.length > 0) {
            let chidrens = item.children;
            let flag = chidrens.some((item) => item.show);
            if (flag) {
              item.show = true;
            }
            this.setParentMenu(item.children);
          }
        }
      }
    },
    /*
    二级菜单获取权限(通过控制show来显示隐藏)
    @params
    {Array} dataMenus 菜单数组
  */
    getProfessionMenu(dataMenus) {
      let menus = this.routes;
      if (
        Array.isArray(dataMenus) &&
        dataMenus.length > 0 &&
        Array.isArray(menus) &&
        menus.length > 0
      ) {
        for (let i = 0; i < dataMenus.length; i++) {
          let urls = permissions[dataMenus[i]["index"]];
          if (!urls) {
            dataMenus[i]["show"] = true;
          } else {
            let result = haveSame(urls, menus);
            if (!result) {
              dataMenus[i]["show"] = false;
            }
          }
          if (
            Array.isArray(dataMenus[i]["children"]) &&
            dataMenus[i]["children"].length > 0
          ) {
            this.getProfessionMenu(dataMenus[i]["children"]);
          }
        }
      } else if (
        Array.isArray(dataMenus) &&
        dataMenus.length > 0 &&
        Array.isArray(menus) &&
        menus.length == 0
      ) {
        for (let i = 0; i < dataMenus.length; i++) {
          dataMenus[i]["show"] = false;
          if (
            Array.isArray(dataMenus[i]["children"]) &&
            dataMenus[i]["children"].length > 0
          ) {
            this.getProfessionMenu(dataMenus[i]["children"]);
          }
        }
      }
    },
    /*
     * @desc 初始化菜单
     * */
    initMenu() {
      if (!localStorage.getItem("activePath")) {
        this.activePath = this.$route.path;
        localStorage.setItem("activePath", this.$route.path);
        return;
      }
      var activePath = localStorage.getItem("activePath");
      this.activePath = activePath;
    },
    /*
     * @desc 菜单选择，同时存取tag标签
     * @params
     * {String} val 菜单路径
     * */
    fnSelect(val) {
      localStorage.setItem("activePath", val);
      this.$store.commit("alarm/set_auto_alert_show", false);
      this.activePath = val;
      this.menuCheck = {};
      this.getMenuItem(this.menus, val);
      var arr = JSON.parse(JSON.stringify(this.visitedViews));
      if (this.hasRoute(this.menuCheck.index) == false) {
        if (document.getElementById("tags-view-wrapScroll")) {
          arr.push({
            path: this.menuCheck.index,
            title: this.menuCheck.meta.title,
            left:
              document
                .getElementById("tags-view-wrapScroll")
                .getBoundingClientRect().width - 200,
          });
          this.$store.commit("tagViews/addVisitedView", arr);
          localStorage.setItem("menu", JSON.stringify(arr));
        }
      }
      this.initLeft();
    },

    /*
     * 重新设置位置
     * */
    initLeft() {
      this.$nextTick(() => {
        setTimeout(() => {
          var container = document.getElementById("tags-view-wrapScroll");
          if (container) {
            var childs = container.children;
            var width =
              window.innerWidth -
              document.querySelector(".scrollbar-wrapper").clientWidth;
            var initWidth = 30;
            if (childs.length > 0) {
              for (let i = 0; i < childs.length; i++) {
                initWidth += childs[i].getBoundingClientRect().width + 5;
                if (childs[i].getAttribute("data-path") == this.$route.path) {
                  break;
                }
              }
              var scrollLeft = initWidth - width;
              var scrollLefts = scrollLeft <= 0 ? 0 : scrollLeft;
              this.$store.commit("tagViews/changeScroll", scrollLefts);
            }
          }
        }, 100);
      });
    },

    /*
     * @desc 判断面包屑数组里面是否包含了此数据
     * @params
     * {String} path 路由路径
     * */
    hasRoute(path) {
      var arr = JSON.parse(JSON.stringify(this.visitedViews));
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.path == path) {
            return true;
          }
        }
      }
      return false;
    },

    /*
     * @desc 获取当前菜单对象
     * @params
     * {Array} arr 菜单数组
     * {String} val 要寻找的路径
     * */
    getMenuItem(arr, val) {
      if (Array.isArray(arr) && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (val == arr[i]["index"]) {
            this.menuCheck = arr[i];
          }
          if (
            Array.isArray(arr[i]["children"]) &&
            arr[i]["children"].length > 0
          ) {
            this.getMenuItem(arr[i]["children"], val);
          }
        }
      }
    },

    /*
     * @desc 初始化tag标签
     * */
    initTag() {
      if (localStorage.getItem("menu")) {
        var arr = JSON.parse(localStorage.getItem("menu"));
        this.$store.commit("tagViews/addVisitedView", arr);
      } else {
        var arr = [
          { path: this.$route.path, title: this.$route.meta.title, left: 0 },
        ];
        this.$store.commit("tagViews/addVisitedView", arr);
      }
    },
  },
  mounted() {
    this.getProfessionMenu(this.menus);
    this.setParentMenu(this.menus);
    this.initTag();
    this.initMenu();
  },
  components: {
    MenuItem,
  },
};
</script>
<style>
.el-menu {
  border-right-width: 0;
}
</style>
<style scoped>
.menu-ul {
  width: 100%;
  height: calc(100vh - 90px);
  overflow-x: hidden;
  /* padding-bottom: 50px; */
}
.scrollbar-wrapper >>> .happy-scroll-container {
  width: 100% !important;
  height: calc(100vh - 90px);
  display: flex;
  flex-flow: column;
}

.el-menu-vertical {
  min-height: 100vh;
}
/* .title{
        color: #fff;
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    } */
.menu-wrap {
  overflow: hidden;
}
.logo {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 25px;
  cursor: pointer;
}
.logo img {
  width: 120px;
  height: 50px;
}
.scrollbar-wrapper {
  overflow-x: hidden !important;
  /* overflow-y: scroll; */
}
</style>
